我知大家都忙，直接進主題。
Android studio開一個新的專案，進入他的activity_main.xml檔:

TextView

這應該是第一個接觸到的也最容易上手的元件，專案建立後立刻就附贈一個"Hello World"的TextView如下:

<LinearLayout    ...>
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
         />
</LinearLayout>

先忽略父層Layout，以這個TextView來認識元件的屬性

• id : 元件的唯一識別符，沒有強制要設定，會被外部使用的話就需要設定，如Activity、或是其他元件約束線的參照。id怎麼表示?
  • 建議一律使用英文，不要使用中文。
  • 小駝峰 : 首字母小寫，之後每個單字的首字母大寫，單字之間不留空格，如:textHelloKotlin。
  • 字母都小寫，字母與字母間用下劃線隔開，如 : text_hello_kotlin。
  • 為元件取名的話，可以用元件類型加上可供辨識的特徵、功能來命名，讓人一眼可以分辨出是在指哪一個元件，如:buttonSend、textTitle...等。
  • 同類型的檔案，命名風格建議一致，不要這邊小駝峰、那邊下劃線，例如 : xml檔都用下劃線，kotlin檔都用小駝峰。我是一律都用小駝峰，懶得使用下劃線XD
• layout_width、layout_height : 元件的寬度與高度，必須設。
  • "match_parent" : 元件符合父層大小，就是由父層layout決定元件大小。以下圖來看寬度是match_parent，所以右邊視窗的設計圖跟藍圖都顯示元件的外框是符合整個圖面寬度的。但是裡面的文字大小是不會跟著拉長的。
    
  • "wrap_content" : 元件大小剛好可以容納內容，就是由元件內容決定大小。以上面同一張圖來看，高度是wrap_content，所以可看到設計圖跟藍圖，元件的上下外框是符合內容的高度的。
  • 自訂固定尺寸，單位是dp，一種支持不同螢幕像素密度的尺寸單位，如:100dp。改變元件寬、高度並不會改變字型大小。
• 預設是文字對齊元件左上角，可以使用gravity來改變文字對齊方式，設定值有非常多選項，可以用"|"(位置在enter鍵上方)隔開指定多個值。如 : 靠下置中"center|bottom"
  
• layout_gravity : 與gravity容易搞混，是指這個TextView元件在layout的位置，因應父層layout的類型而會有不同的呈現。
• 改變顏色使用textColor，小小tip，可以先隨意選個值設定，在左側點選顏色樣本方塊(出現下圖)就可以挑選更多顏色。
  
• color可以放入res/colors資源檔(如下圖)來做管理，以便重複引用，color的格式則是hex color(十六進位色碼標示法)。
  
• 使用textsize屬性改變Text的文字大小，單位是sp，一種可縮放的像素。
  註:dp、sp細節請閱讀:官方文件 dp、sp
• text : 在畫面上顯示出來的文字，直接鍵入字串的話會發現只有該屬性有底色標示，將游標移到該行，點選小燈泡，IDE將會建議將字串新增到res/strings.xml管理，不這樣的話，設置不同配置(如:螢幕是直立模式或橫向模式)的時候，就需要一個個字串手動更新，並且不利於轉換多國語言。
  
  依照指引完成即可，打開res/value/strings.xml檔(如下圖)查看，裡面將會新增一條string紀錄。
  
• 上面都只是很基本常用的，還有非常多其他的，可參考官方文檔

Button

以下三種按鈕一樣在activity_main.xml中操作。
介紹完TextView，現在來介紹他的子類之一，也是很常使用的Button。
button是一種由文字或icon或兩者組成的元件，並且在用戶觸碰時產生執行我們設定的動作。

Text按鈕

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_text"
    ... />

Icon按鈕

將所需的圖片放在res/drawable資料夾中，有使用到Image的部分，為了照顧有視力方面缺陷的用戶，IDE都會要求設置圖片描述這個屬性(android:contentDescription)，輔助工具會朗讀出我們設置的描述。

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/button_icon"
    android:contentDescription="@string/button_icon_desc"
    ... />

Icon+Text 按鈕

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_text"
    android:drawableLeft="@drawable/button_icon"
    ... />

最後android:drawableLeft="@drawable/button_icon"這個屬性，IDE會建議改成drawableStart，提示如下:

Consider replacing android:drawableLeft with android:drawableStart="@drawable/button_icon" to better support right-to-left layouts

註:android系統依據各地區使用語言的習慣，分為由右到左RTL跟由左到右LTR兩種系統，RTL時start=right；LTR時start=left。如果app國際化的話，也是要考慮這一塊的，我們幼幼班先有這種國際觀就好XD。
總之，從善如流跟著改了後，發現icon消失了...
可以用回android:drawableLeft ，如果不想看到IDE的提醒底色那可以使用另一種寫法:

• app:icon : 設定icon來源
• app:iconGravity :設定icon位置。有多種設定值可選:start、end、top、textStart、textEnd、textTop。前三者是在這個button的開頭、尾部、頂部，後三者就是與text的相對位置。

  <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/black"
        app:icon ="@drawable/button_icon"
        app:iconGravity="textStart"
        android:text="@string/button_text"
        android:textAllCaps="false"/>

顯示如下:

在activity中使用 setOnClickListener

顧名思義，就是在activity中一個按鈕的監聽器，如果用戶按了按鈕，這個監聽器就會做出我們指定的事情，就用上面activity_main.xml檔做好的Alarm Button來試試看如何在MainActivity.kt檔使用。
就讓用戶點擊第一個只有text的button時跳出一條Toast訊息。
第1行的意思就是跟MainActivty說，在你這邊叫btnAlarm的是一個Button類型的傢伙，aka在xml檔那裡id叫"button"。
然後接下來就是在幫btnAlarm設定一個監聽器，用戶點了它，就會做出兩個花括號{}中間的事情，也就是跳出一條"You click the Alarm Button"的訊息。

//在MainActivity onCreat()裡
 val btnAlarm :Button= findViewById(R.id.button)
 btnAlarm.setOnClickListener {
     Toast.makeText(this,"You click the Alarm Button",Toast.LENGTH_SHORT).show()
}

如果不設監聽器是否可以達到一樣的效果呢?答案是Yes

android:onClick

這是在activity中聲明一個方法，並將這方法在xml檔中按鈕的屬性android:onClick設定我們定義好的方法，來響應用戶的點擊事件，現在以第二的icon按鈕來試試。
分為兩步驟設置:

1. 在MainActivity中 onCreate()下方 : 定義一個叫sendToast的方法，這個方法必須是public的，沒有回傳值，並且訂一個點擊時傳入的View。

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {...}
//sendToast()定義在onCreate花括號之外喔
   fun sendToast(view: View){
       Toast.makeText(this,"You click the Alarm ImageButton",Toast.LENGTH_SHORT).show()
   }
}

2.activity_main.xml中設定點擊事件(android:onClick="sendToast")，就完成囉。

 <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/black"
        android:onClick="sendToast"
        ... />

參考官方文件
明天見